---
title: gluestack-ui Slider Component | Installation, Usage, and API

description: Easily select values within a range by sliding a visual indicator along a track.

pageTitle: Slider

pageDescription: Easily select values within a range by sliding a visual indicator along a track.

showHeader: true
---

import { Meta } from '@storybook/addon-docs';
import { useRef, useEffect, useState } from 'react';

<Meta title="with-nativewind/Components/Forms/Slider" />

import { Slider } from '../../core-components/nativewind';
import {
  SliderTrack,
  SliderFilledTrack,
  SliderThumb,
} from '../../core-components/nativewind';
import { HStack, Volume2Icon, Box } from '../../core-components/nativewind';
import {
  VStack,
  Volume,
  Text,
  LightbulbIcon,
  Icon,
  Heading,
  Button,
} from '../../core-components/nativewind';
import { transformedCode } from '../../utils';
import {
  AppProvider,
  CodePreview,
  InlineCode,
  Table,
  TableContainer,
} from '@gluestack/design-system';
import Wrapper from '../../core-components/nativewind/Wrapper';
import { Center } from '../../core-components/nativewind/center';
import { CollapsibleCode, Tabs } from '@gluestack/design-system';
import AnatomyImage from '../../extra-components/nativewind/AnatomyImage';

This is an illustration of **Slider** component.

<Wrapper>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={true}
    metaData={{
      code: `
      <Center className="w-[300px] h-[100px]">
          <Slider  defaultValue={30} {...props}  >
            <SliderTrack>
              <SliderFilledTrack />
            </SliderTrack>
            <SliderThumb />
          </Slider>
      </Center>
      `,
      transformCode: (code) => {
        return transformedCode(code);
      },
      scope: {
        Wrapper,
        Slider,
        SliderTrack,
        SliderFilledTrack,
        SliderThumb,
        Center,
      },
      argsType: {
        size: {
          control: 'select',
          options: ['sm', 'md', 'lg'],
          default: 'md',
        },
        orientation: {
          control: 'select',
          options: ['vertical', 'horizontal'],
          default: 'horizontal',
        },
        isDisabled: {
          control: 'boolean',
        },
        isReversed: {
          control: 'boolean',
        },
      },
    }}
  />
</Wrapper>

<br />

## Installation

<Tabs value="cli" type="section">
  <Tabs.TabList>
      <Tabs.Tab value="cli">
        <Tabs.TabTitle>CLI</Tabs.TabTitle>
      </Tabs.Tab>
     <Tabs.Tab value="manual">
        <Tabs.TabTitle>Manual</Tabs.TabTitle>
     </Tabs.Tab>
  </Tabs.TabList>
  <Tabs.TabPanels>
    <Tabs.TabPanel value="cli">
<>

### Run the following command:
  ```bash
  npx gluestack-ui add slider
  ```
</>
    </Tabs.TabPanel>
    <Tabs.TabPanel value="manual"> 
<>

### Step 1: Install the following dependencies:
```bash
npm i @gluestack-ui/slider
```

### Step 2: Copy and paste the following code into your project.
<CollapsibleCode>

```jsx 
%%-- File: core-components/nativewind/slider/index.tsx --%% 
```
</CollapsibleCode>

### Step 3: Update the import paths to match your project setup.
</>
    </Tabs.TabPanel>
  </Tabs.TabPanels>
</Tabs>

## API Reference

To use this component in your project, include the following import statement in your file.

```jsx
import { Slider } from '@/components/ui/slider';
```

<AnatomyImage mobileUrl='https://i.imgur.com/k4vbMIM.png' webUrl='https://i.imgur.com/E1WZefI.png' classNameStyle='aspect-[513/343] md:aspect-[736/231]' />

```jsx
export default () => (
  <Slider>
    <SliderTrack>
      <SliderFilledTrack />
    </SliderTrack>
    <SliderThumb />
  </Slider>
);
```

### Component Props

This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.

#### Slider

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.

<>
  <TableContainer>
    <Table>
      <Table.THead>
        <Table.TR>
          <Table.TH>
            <Table.TText>Prop</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Type</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Default</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Description</Table.TText>
          </Table.TH>
        </Table.TR>
      </Table.THead>
      <Table.TBody>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>onChange</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{'(value: number) => void'}</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>
              Function called when the state of the Slider changes.
            </Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>isDisabled</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>bool</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>false</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>When true, this will disable Slider</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>isReadOnly</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>boolean</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>false</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>
              To manually set read-only to the checkbox.
            </Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>sliderTrackHeight</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>number</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>8</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>To change the slider track height .</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>defaultValue</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>number</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>To change the slider value .</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>minValue</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>number</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>The slider's minimum value</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>maxValue</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>number</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>The slider's maximum value.</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>value</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>number</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>The slider's current value.</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>step</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>number</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText> The slider's step value.</Table.TText>
          </Table.TD>
        </Table.TR>
      </Table.TBody>
    </Table>
  </TableContainer>
</>

**Descendants Styling Props**
Props to style child components.

<>
  <TableContainer>
    <Table>
      <Table.THead>
        <Table.TR>
          <Table.TH>
            <Table.TText>Sx Prop</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Description</Table.TText>
          </Table.TH>
        </Table.TR>
      </Table.THead>
      <Table.TBody>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>_thumb</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`Prop to style SliderThumb Component`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>_track</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`Prop to style SliderTrack Component`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>_filledTrack</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`Prop to style SliderFilledTrack Component`}</Table.TText>
          </Table.TD>
        </Table.TR>
      </Table.TBody>
    </Table>
  </TableContainer>
</>

#### SliderTrack

It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/Pressable) component.

#### SliderFilledTrack

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.

#### SliderThumb

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.

### Features

- Keyboard support for actions.
- Support for hover, focus and active states.

### Accessibility

We have outlined the various features that ensure the Slider component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards.Adheres to the [WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/slider/).

#### Keyboard

- `Tab`: Moves focus to the next focusable element.
- `Right Arrow`: Increase the value of the slider by one step.
- `Up Arrow`: Increase the value of the slider by one step.
- `Left Arrow`: Decrease the value of the slider by one step.
- `Down Arrow`: Decrease the value of the slider by one step.

### Screen Reader

- VoiceOver: When the slider is focused, the screen reader will announce the slider's value.

### Props

Slider component is created using View component from react-native. It extends all the props supported by [React Native View](https://reactnative.dev/docs/view#props).

<!--
## Spec Doc

Explore the comprehensive details of the Slider in this document, including its implementation details, checklist, and potential future additions. Dive into the thought process behind the component and gain insights into its development journey.

<iframe
  style={{
    borderRadius: '8px',
    border: ' 1px solid rgba(0, 0, 0, 0.1)',
    aspectRatio: 736 / 585,
  }}
  src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2F%25C2%25A0%25F0%259F%2593%259Agluestack-UI-handbook%3Ftype%3Ddesign%26node-id%3D6449-50331%26t%3DyCpyOJadMBgzgdP2-1%26scaling%3Dscale-down%26page-id%3D6429%253A48430%26starting-point-node-id%3D6449%253A50331%26mode%3Ddesign"
  allowFullScreen
/> -->
